@extends('Home.Index.index')
@section('title')
    商品详情
@endsection

@section('content')
    <section id="main">
        <div class="container_12">
            <div id="sidebar" class="grid_3">
                {{--<aside id="categories_nav">--}}
                    {{--<h3>Categories</h3>--}}

                    {{--<nav class="left_menu">--}}
                        {{--<ul>--}}
                            {{--<li><a href="#">Solids <span>(21)</span></a></li>--}}
                            {{--<li><a href="#">Liquids <span> (27)</span></a></li>--}}
                            {{--<li><a href="#">Spray <span>(33)</span></a></li>--}}
                            {{--<li><a href="#">Electric <span>(17)</span></a></li>--}}
                            {{--<li><a href="#">For Cars <span>(23)</span></a></li>--}}
                            {{--<li><a href="#">For Room <span>(7)</span></a></li>--}}
                            {{--<li class="last"><a href="#">Other <span>(135)</span></a></li>--}}
                        {{--</ul>--}}
                    {{--</nav><!-- .left_menu -->--}}
                {{--</aside><!-- #categories_nav -->--}}

                <aside id="specials" class="specials">
                    <h3>猜你喜欢</h3>

                    <ul>
                        @foreach($similar_goods as $similar)
                        <li>
                            <div class="prev">
                                {{--商品详情页链接和商品图片地址--}}
                                <a href="{{url('goods_info',['goods_id'=>$similar->goods_id,'c_id'=>$similar->c_id])}}"><img src="{{$similar->img_src}}" alt="" title="" /></a>
                            </div>
                            <div class="cont">
                                <a href="#">{{$similar->goods_name}}</a>
                                <div class="prise">￥{{$similar->price}}</div>
                            </div>
                        </li>
                            @endforeach
                    </ul>
                </aside><!-- #specials -->

                <aside id="tags">
                    <h3>热门标签</h3>
                    @foreach($classify as $class)
                    <a class="t{{$class->tag_id}}" href="#">{{$class->c_name}}</a>
                        @endforeach
                </aside><!-- #community_poll -->
            </div><!-- .sidebar -->

            @foreach($goods as $res)
            <div id="content" class="grid_9">
                <h1 class="page_title">{{$res->goods_name}}</h1>
                <div class="product_page">
                    <div class="grid_4 img_slid" id="products">
                        <div class="grid_3 product" >
                            <div class="prev">
                                {{--商品详情连接及图片信息--}}
                                <a href="#"><img src="{{$res->img_src}}"/></a>
                            </div><!-- .prev -->
                        </div>
                        {{--缩略图展示--}}
                        {{--<ul class="pagination clearfix" id="thumblist">--}}
                            {{--<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/produkt_slid.png',largeimage: './images/produkt_slid.png'}"><img src='images/produkt_slid.png' alt=""></a></li>--}}
                            {{--<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/produkt_slid1.png',largeimage: './images/produkt_slid1.png'}"><img src='images/produkt_slid1.png' alt=""></a></li>--}}
                            {{--<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/produkt_slid2.png',largeimage: './images/produkt_slid2.png'}"><img src='images/produkt_slid2.png' alt=""></a></li>--}}
                            {{--<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/produkt_slid3.png',largeimage: './images/produkt_slid3.png'}"><img src='images/produkt_slid3.png' alt=""></a></li>--}}
                            {{--<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './images/produkt_slid4.png',largeimage: './images/produkt_slid4.png'}"><img src='images/produkt_slid4.png' alt=""></a></li>--}}
                        {{--</ul>--}}
                    </div><!-- .grid_4 -->
                    <div class="grid_5">
                        <div class="entry_content">
                            <p>{{$res->goods_describe}}</p>
                            <div class="ava_price">
                                <div class="availability_sku">
                                    @foreach($list as $k=>$m)
                                    <div id="property">
                                        @foreach($m as $mm)
                                        <input type="radio"  name="{{$k}}"  onchange="change()" id="{{$mm->p_name}}" data-price="{{$mm->price}}"  value="{{$mm->property_value}}"><span>{{$mm->property_value}}</span>
                                        @endforeach
                                    </div>
                                        @endforeach

                                </div><!-- .availability_sku -->
                                <div class="price">
                                    <div class="price_new" id="price">￥{{$res->price}}</div>
                                    {{--<div class="price_old">$725.00</div>--}}
                                </div><!-- .price -->
                            </div><!-- .ava_price -->
                            <div class="block_cart">
                                <div class="obn_like">
                                    <div class="obn"><a href="#" class="obn">加入收藏</a></div>
                                    <div class="like"><a href="#" class="like">加入心愿单</a></div>
                                </div>
                                <div class="cart">
                                    <a href="#" class="bay">加入购物车</a>
                                    <input type="text" name="" class="number" id="number" value="" />
                                    <span>购买数量:</span>
                                </div>
                                <div class="clear"></div>
                            </div><!-- .block_cart -->
                        </div><!-- .entry_content -->
                    </div><!-- .grid_5 -->
                    <div class="clear"></div>

                    <div class="grid_9" >
                        <div id="wrapper_tab" class="tab1">
                            <a href="#" class="tab1 tab_link">商品详情</a>
                            <a href="#" class="tab2 tab_link">商品评价</a>
                            <div class="clear"></div>

                            <div class="tab1 tab_body">
                                <h4>商品详情标题</h4>
                                <p>商品详情内容</p>
                                <ul>
                                    <li>She was walking to the mall.</li>
                                    <li>Ted might eat the cake.</li>
                                    <li>You must go right now.</li>
                                    <li>Words were spoken.</li>
                                    <li>The teacher is writing a report.</li>
                                </ul>
                                <div class="clear"></div>
                            </div><!-- .tab1 .tab_body -->

                            <div class="tab2 tab_body">
                                <h4>顾客评价</h4>
                                <ul class="comments">

                                    @foreach($comment as $v)
                                    <li>
                                        <div class="autor">{{$v->user_name}}</div>, <time datetime="2012-11-03">{{$v->create_time}}</time>

                                        <div class="evaluation">
                                            <div class="quality">
                                                <strong>质量</strong>
                                                @if($v->quality_score == 1)
                                                <a class="plus" href="#"></a>
                                                <a href="#"></a>
                                                <a href="#"></a>
                                                <a href="#"></a>
                                                <a href="#"></a>
                                                @elseif($v->quality_score == 2)
                                                <a class="plus" href="#"></a>
                                                <a class="plus" href="#"></a>
                                                <a href="#"></a>
                                                <a href="#"></a>
                                                <a href="#"></a>
                                                @elseif($v->quality_score == 3)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                @elseif($v->quality_score == 4)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a href="#"></a>
                                                @else($v->quality_score ==5)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                   @endif
                                            </div>
                                            <div class="price">
                                                <strong>价格</strong>
                                                @if($v->price_score == 1)
                                                    <a class="plus" href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                @elseif($v->price_score == 2)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                @elseif($v->price_score == 3)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a href="#"></a>
                                                    <a href="#"></a>
                                                @elseif($v->price_score == 4)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a href="#"></a>
                                                @else($v->price_score ==5)
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                    <a class="plus" href="#"></a>
                                                @endif
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .evaluation -->

                                        <p>{{$v->comment}}</p>
                                    </li>
                                        @endforeach

                                </ul><!-- .comments -->

                                <form class="add_comments">
                                    <h4>评价一下吧</h4>

                                    <div class="evaluation">
                                        <div class="quality">
                                            <strong>质量</strong><sup class="surely">*</sup>
                                            <input  type="radio" name="quality" value="1" /><span class="eva_num">1</span>
                                            <input  type="radio" name="quality" value="2" /><span class="eva_num">2</span>
                                            <input  type="radio" name="quality" value="3" /><span class="eva_num">3</span>
                                            <input  type="radio" name="quality" value="4" /><span class="eva_num">4</span>
                                            <input  type="radio" name="quality" value="5" /><span class="eva_num">5</span>
                                        </div>
                                        <div class="price">
                                            <strong>价格</strong><sup class="surely">*</sup>
                                            <input  type="radio" name="price" value="1" /><span class="eva_num">1</span>
                                            <input  type="radio" name="price" value="2" /><span class="eva_num">2</span>
                                            <input  type="radio" name="price" value="3" /><span class="eva_num">3</span>
                                            <input  type="radio" name="price" value="4" /><span class="eva_num">4</span>
                                            <input  type="radio" name="price" value="5" /><span class="eva_num">5</span>
                                        </div>
                                        <div class="clear"></div>
                                    </div><!-- .evaluation -->
                                    <div class="text_review">
                                        <strong>评论内容</strong><sup class="surely">*</sup><br/>
                                        <textarea name="text" id="comment"></textarea>
                                    </div><!-- .text_review -->
                                    <button type="button" id="send">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                                </form><!-- .add_comments -->
                                <div class="clear"></div>
                            </div><!-- .tab2 .tab_body -->

                    </div><!-- .grid_9 -->
                <div class="clear"></div>
            </div><!-- #content -->
            <div class="clear"></div>
        </div>
            </div>
            @endforeach
        </div><!-- .container_12 -->
    </section><!-- #main -->
    <div class="clear"></div>

    <script>
        $(document).ready(function() {
            $('#wrapper_tab a').click(function() {
                if ($(this).attr('class') != $('#wrapper_tab').attr('class') ) {
                    $('#wrapper_tab').attr('class',$(this).attr('class'));
                }
                return false;
            });
        });
    </script>


    <script>


        function change() {
            var o_price = '{{$goods[0]->price}}';
            var property = $("#property input[type='radio']");
            property.each(function () {
                if($(this).is(':checked'))
                {
                    var p_price = $(this).attr('data-price');
                    var n_price = parseFloat(p_price)+parseFloat(o_price);
                    $('#price').text(n_price);

                }
            });

        }


        $(function() {
            var goods_id = '{{$goods[0]->goods_id}}';

            var goods_name = '{{$goods[0]->goods_name}}';
            var img_src = '{{$goods[0]->img_src}}';

            //属性

            var offset = $("#end").offset();

            $(".bay").click(function(event){

                var property = $("#property input[type='radio']");
                var mm = [];

                property.each(function () {
                    if($(this).is(':checked'))
                    {
                        mm.push($(this).attr('id'));
                        mm.push($(this).val());

                    }
                });

                if(property.length !== 0 && mm.length === 0)
                {
                    layer.msg('您还没有选择商品属性',{icon:5});
                    return false;
                }

                if(mm.length == 0)
                {
                     mm = [0];
                }

                var goods_num = $('#number').val();
                if(isNaN(goods_num) || goods_num<=0)
                {
                    layer.msg('你还没有选择商品数量',{icon:5});
                    return false;
                    //选择某些商品属性时,还需要对是否选择属性作出判断  to do
                }

                console.log(price);

                $.post('{{url('/shopping_cart/')}}',{goods_id:goods_id,goods_count:goods_num,goods_name:goods_name,img_src:img_src,property:mm},function (e) {
                    console.log(e);
                    if(e.status == 0)
                    {
                        layer.msg(e.info,{icon:5});
                        return false;
                    }else {

                        var addcar = $(this);
                        var img = $('.prev').children().children().attr('src');
                        var flyer = $('<img class="u-flyer" src="'+img+'">');
                        flyer.fly({
                            start: {
                                left: event.pageX,
                                top: event.pageY
                            },
                            end: {
                                left: offset.left+10,
                                top: offset.top+10,
                                width: 0,
                                height: 0
                            },
                            onEnd: function(){
                                //$("#msg").show().fadeOut(3000);
                                layer.msg('已成功加入购物车！',{icon:1});
                                addcar.css("cursor","default").removeClass('orange').unbind('click');
                                this.destory();
                            }
                        });
                    }
                });

            });

        });


    </script>

    <script>
        $(function () {
            var goods_id = {{$goods[0]->goods_id}}
            $('#send').click(function () {
                var quality = $("input[name='quality']:checked").val();
                var price = $("input[name='price']:checked").val();
                var comment = $('#comment').val();
                $.post('{{url('goods_comment')}}',{quality_score:quality,price_score:price,comment:comment,goods_id:goods_id},function (e) {
                    if(e.status)
                    {
                        layer.msg(e.info,{icon:6});
                    }else {
                        layer.msg(e.info,{icon:5});
                    }
                });
            });
        });
    </script>
@endsection